<template>
    <div>
        <div class="item border-bottom" v-for="(item,i) in detailList" :key="i">
            <div class="item-title">
                <span class="title-icon"></span>
                {{item.title}}
            </div>
            <div v-if="item.children" class="item-children">
                <!-- 组件递归 -->
                <List :detailList="item.children"></List>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'List',
        props:{
            detailList:Array
        },
        data() {
            return {
                
            }
        },
    }
</script>

<style lang="stylus" scoped>
.item
    .item-title
        line-height .8rem
        font-size .32rem
        padding 0 .2rem
        .title-icon
            display: inline-block
            position: relative
            width: .36rem
            height: .36rem
            top: .06rem
            left: .06rem
            background: url('http://s.qunarzz.com/piao/image/touch/sight/detail.png') 0 -.45rem no-repeat
            margin-right: .1rem
            background-size: .4rem 3rem
.item-children
    padding 0 .2rem
</style>